<template>
<div style="background: rgb(245, 246, 247); padding-top:0.1rem">
  <div class="brandWrap">
    <div class="clearfix brandHead">
      <img
        :src="header.imageUrl"
        alt
        class="fl"
      />
      <div class="fr">
        更多
        <img src="https://api.10street.cn/wap/images/home_2019/gengduo.png" alt />
      </div>
    </div>
    <div class="brand">
      <div class="brand_box">
        <div class="brand_list" v-for="item in data" :key="item.commonId" :shopid="item.commonId" @click="$emit('commonId' , item.commonId)">
          <a href="javascripr:void(0)">
            <img
              :src="item.imageUrl"
              alt
              class="goods-pic"
            />
            <p class="goods-name">{{item.goodsName}}</p>
            <div class="goods-price">
              <p>
                ￥
                <em>{{item.goodsPrice}}</em>
              </p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  props:['val'],
  data(){
    return {
      data:"",
      header:""
    }
  },
  watch:{
    val(){
      this.header = JSON.parse(this.val.itemData)[0]
      this.data = JSON.parse(this.val.itemData)[0].goods
    }
  }
};
</script>

<style lang='stylus' scoped>
.fr
    float right!important
.brandWrap
    background: #fff;
    margin: 0 0.1rem;
    padding: 0.1rem;
    border-radius: 0.1rem;
    overflow: hidden;
    .brandHead
        margin-bottom: 0.1rem;
        &>img
            height: 0.2rem;
            margin: 0.033rem 0;
        div
            font-size: 0.130rem;
            color: #666;
            img
                width: 0.055rem;
                margin: -0.022rem 0 0 0.044rem;
    .brand
        width 100%
        display flex
        margin: 0 auto;
        position: relative;
        overflow: auto
        z-index: 1;
        &>div
            display flex
        .brand_list
            margin-right: 0.05rem
            width: 1rem;
            background: #fff;
            border-radius: 0.066rem;
            overflow: hidden;
            position: relative;
            .goods-price
                margin: 0 0.066rem;
                line-height: 0.22rem;
                height: 0.22rem;
                overflow: hidden;
                font-size: 0.022rem;
                color: #FF4A42;
                em
                    font-size: 0.13rem;
                    font-weight: 600;
            .goods-pic
                width: 100%;
                height: 1rem;
            .goods-name
                color: #333333;
                margin: 0.022rem 0.066rem;
                font-size: 0.1rem;
                line-height: 0.187rem;
                height: 0.352rem;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
</style>